<!-- 模板 -->
<template>

  <p :style="{color:'red',fontSize:35+'px'}">Lorem ipsum dolor sit amet.</p>
  <!--  <img :class="{pp:false}" :src="pic" alt="" class="icon">-->
  <img :class="[c1,c2]" :src="pic" alt="">
  <img alt="" v-bind:src="pic">

  <h3 :style="{color:ccc,fontSize:fs+'px'}">hello</h3>
  <button @click="fs+=2">+</button>
  <button @click="fs-=5">-</button>
</template>

<!-- 脚本程序 -->
<script lang="ts" setup>
import {ref, reactive} from 'vue'

const c1 = ref('pp')
const c2 = ref('bb')
const ccc = ref('red')
const fs = ref(18)

//创建响应式数据对象
const cc = reactive({
  pp: true,
  aa: false,
  bb: true,
})

const pic = ref('https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF')
</script>


<!-- sass 样式，scoped 本组件使用 -->
<!-- npm install sass-loader sass --save-dev -->
<style lang="scss" scoped>
img {
  width: 150px;
}

.pp {
  border: 1px dashed red;
  padding: 5px;
}

.bb {
  border-radius: 20px;
  transition: all .3s;
  cursor: pointer;
  opacity: .8;

  &:hover {
    width: 155px;
    opacity: 1;
    border-color: blue;
  }
}
</style>
